<template>
  <div class="main">
    <div class="cloum alitem">
      <h1 style="margin: 15px 0">
        {{ year }}年 {{ userInfo.province }}高考志愿模拟填报
      </h1>
      <el-steps style="width: 100%" align-center finish-status="success">
        <el-step title="选择批次" />
        <el-step title="智能填报" />
        <el-step title="生成志愿表" />
      </el-steps>
    </div>
    <div class="alitem" style="margin: 20px 0">
      <h5>我的成绩：</h5>
      <div style="font-size: 14px">
        {{ userInfo.score + '分 ' + userInfo.sgname }}&nbsp;
      </div>
      <h5 v-show="isDzTypeDiff == 1">语数外总分：</h5>
      <div v-show="isDzTypeDiff == 1" style="font-size: 14px">
        {{ userInfo.score_wx + '分 ' }}&nbsp;
      </div>
      <el-icon color="#004cf7" size="12" @click="onClickUpdateScore">
        <EditPen />
      </el-icon>
    </div>
    <el-table
      :header-cell-style="{
        backgroundColor: '#f5f5f5',
        color: '#333',
        'font-weight': '500',
        'text-align': 'center',
      }"
      :cell-style="{ 'text-align': 'center' }"
      border
      :data="batchData"
      empty-text="暂无数据"
      style="width: 100%"
      height="300"
    >
      <el-table-column prop="batch" label="报考批次" />
      <el-table-column prop="course" label="科类" />
      <el-table-column prop="score" :label="year + '批次线'"> </el-table-column>
      <el-table-column label="填报">
        <template #default="spoce">
          <el-button
            style="border-color: var(--color-text); color: var(--color-text)"
            @click="oneClickToFillIn(spoce.$index)"
            >一键填报</el-button
          >
          <el-button
            style="background: var(--color-text); color: #fff"
            @click="onClickFillVolunteer(spoce.$index, spoce)"
            >智能填报</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <h4 style="margin-top: 20px">填报须知：</h4>
    <div style="font-size: 14px; font-weight: 500; color: #000">
      <div>{{ description }}</div>
    </div>
  </div>

  <!--用户修改信息-->
  <userUpdate ref="userUpdatesRef"></userUpdate>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import { batchInfo } from '/src/api/volunteer/volunteer.js';
import { noteDesc } from '/src/api/scoreline/scoreline.js';
import { useRouter } from 'vue-router';
import userUpdate from '../volunteer/components/userUpdate.vue';

const router = useRouter();
const store = useStore();
const userInfo = ref(computed(() => store.getters.user.userInfo));
const userUpdatesRef = ref(null);
const batchData = ref([]);
const description = ref('');
const year = ref('');
getBatchInfo();
// 获取批次线信息
function getBatchInfo() {
  let body = {
    pid: userInfo.value.pid,
    course: userInfo.value.course,
    less: 1,
  };
  batchInfo(body).then((res) => {
    batchData.value = res.data.data.batches;
    year.value = res.data.data.year;
  });
}

getNoteDesc();
// 获取分数线描述信息
function getNoteDesc() {
  noteDesc({
    type: 'collegeScoreLineDescription',
    pid: userInfo.value.pid,
  }).then((res) => {
    description.value = res.data.data.collegeScoreLineDescription;
  });
}
// 判断省份
const provinceData = computed(
  () => JSON.parse(localStorage.getItem('provinceList')) || [],
);
const isDzTypeDiff = ref(''); //判断北京、天津 1 显示， 0 不显示
const getisDzTypeDiff = () => {
  if (store.getters.user.userInfo?.pid && provinceData.value.length > 0) {
    isDzTypeDiff.value = provinceData.value.filter(
      (i) => i.id == store.getters.user.userInfo.pid,
    )[0].isDzTypeDiff;
  } else {
    isDzTypeDiff.value = 0;
  }
};
getisDzTypeDiff();
// 点击修改分数
function onClickUpdateScore() {
  userUpdatesRef.value.openChange();
}

/**
 * 点击一键填报
 * @param {Number} index 下标
 */
function oneClickToFillIn(index) {
  localStorage.removeItem('courseNew');
  let batch = batchData.value[index];

  let body = { batchInfo: batch, score: '' };
  let jsonStr = JSON.stringify(body);
  router.push({ path: '/yijiantianbao', query: { data: jsonStr } });
}

/**
 * 智能填报
 * @param {Number} index 下标
 */
function onClickFillVolunteer(index, data) {
  console.log(data);
  localStorage.removeItem('courseNew');
  let batch = batchData.value[index];

  let body = { batchInfo: { ...batch, score: '' } };
  let jsonStr = JSON.stringify(body);

  router.push({ path: '/volunteer', query: { data: jsonStr } });
}
onMounted(() => {
  if (store.getters.user.userInfo.score != 0) {
    return;
  } else {
    userUpdatesRef.value.openChange();
  }
});
</script>

<style>
.table-header-row {
  background-color: #3333;
}
</style>
